<template>
  <div class="playerContainer">
    <div class="playerMain">
      <!-- 控制按钮开始 -->
      <div class="playerPre" />
      <div
        :class="isPlay ? 'playerPlay' : 'playerPause'"
        @click="handlePlayPause"
      />
      <div class="playerNext" />
      <!-- 控制按钮结束 -->
      <!-- 图片开始 -->
      <div class="playerImg">
        <img v-if="songDetailList[0]" :src="songDetailList[0].al.picUrl" />
        <div class="playerMask" />
      </div>
      <!-- 播放详情区域开始 -->
      <div class="playerDetail">
        <!-- 歌曲信息 -->
        <div class="playerSong">
          <span class="playerSongName">{{
            songDetailList[0] ? songDetailList[0].name : '未选中歌曲'
          }}</span>
          <span class="playerSongSinger">{{
            songDetailList[0]
              ? songDetailList[0].ar
                  .map((item) => {
                    return item.name
                  })
                  .join('/')
              : '请选择要播放的歌曲'
          }}</span>
          <div class="playerSongOrigin" />
        </div>
        <!-- 进度条 -->
        <div class="playerBarContainer">
          <div class="playerBar">
            <!-- <div class="playerAlready" :style="{ width: '30%' }" /> -->
            <div class="playerAlready" :style="{ width: barPercentage }" />
            <div class="playerDot" :style="{ left: barPercentage }" />
          </div>
          <span class="playerTimeNow">{{ songCurrentTime }}&nbsp;</span>
          <span class="playerTimeAll">/ {{ songDuration }}</span>
        </div>
      </div>
      <!-- 播放详情区域结束 -->
      <!-- 其他功能开始 -->
      <div class="playerLyrics" />
      <div class="playerCollect" />
      <div class="playerShare" />
      <div class="playerVertical" />
      <div class="playerVoice" />
      <div
        :class="{
          playerCircleMode: true,
          playerCirculate: circleIndex === 0,
          playerRandom: circleIndex === 1,
          playerSingle: circleIndex === 2
        }"
        @click="handleChangeCircleMode"
      />
      <div class="playerTable">
        <span>99</span>
      </div>
      <!-- 其他功能结束 -->
    </div>
    <audio
      ref="audio"
      :src="songUrlList[0] ? songUrlList[0].url : ''"
      autoplay
      controls
    ></audio>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Player',
  data() {
    return {
      /**
       * 控制循环按钮
       * 0 循环 1 随机 2 单曲循环
       * */
      circleIndex: 0,
      // 歌曲当前播放时长
      currentTime: 0,
      // 歌曲总时长
      duration: 0
    }
  },
  computed: {
    ...mapState('player', [
      'songId',
      'isPlay',
      'songUrlList',
      'songDetailList'
    ]),
    // 计算后的当前歌曲播放时间
    songCurrentTime() {
      return (
        Math.floor(this.currentTime / 60)
          .toString()
          .padStart(2, '0') +
        ':' +
        Math.floor(this.currentTime % 60)
          .toString()
          .padStart(2, '0')
      )
    },
    // 计算后的当前歌曲总时长
    songDuration() {
      return (
        Math.floor(this.duration / 60)
          .toString()
          .padStart(2, '0') +
        ':' +
        Math.floor(this.duration % 60)
          .toString()
          .padStart(2, '0')
      )
    },
    // 计算后的进度条百分比
    barPercentage() {
      if (!this.currentTime) {
        return 0
      }
      return (this.currentTime / this.duration) * 100 + '%'
    }
  },
  watch: {
    songId() {
      if (this.isPlay) {
        clearInterval(this.timer)
        this.getTimeChange()
      }
    }
  },
  methods: {
    ...mapMutations('player', ['SET_PLAY_PAUSE']),
    // 计时器获取播放时间变化
    getTimeChange() {
      this.timer = setInterval(() => {
        const { currentTime, duration } = this.$refs.audio
        this.currentTime = currentTime
        this.duration = duration
        if (currentTime >= duration) {
          console.log('可以解构，结束计时器')
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 点击修改循环模式
    handleChangeCircleMode() {
      let { circleIndex } = this
      circleIndex++
      if (circleIndex > 2) {
        circleIndex = 0
      }
      this.circleIndex = circleIndex
    },
    // 点击切换播放或暂停
    handlePlayPause() {
      if (!this.songUrlList[0]) return
      if (this.isPlay) {
        this.$refs.audio.pause()
        clearInterval(this.timer)
      }
      if (!this.isPlay) {
        this.$refs.audio.play()
        this.getTimeChange()
      }
      this.SET_PLAY_PAUSE()
    }
  }
}
</script>

<style lang="less" scoped>
.playerContainer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: url('../assets/images/playbar.png') left 0px;
  color: white;
  .playerMain {
    display: flex;
    align-items: center;
    margin: 5px auto 0;
    width: 1000px;
    height: 45px;
    // 控制按钮
    .playerPre {
      margin-right: 5px;
      width: 28px;
      height: 28px;
      background: url('../assets/images/playbar.png') left -130px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -30px -130px no-repeat;
      }
    }
    .playerPlay {
      width: 36px;
      height: 36px;
      background: url('../assets/images/playbar.png') left -204px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -40px -204px no-repeat;
      }
    }
    .playerPause {
      width: 36px;
      height: 36px;
      background: url('../assets/images/playbar.png') left -165px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -40px -165px no-repeat;
      }
    }
    .playerNext {
      margin-left: 5px;
      width: 28px;
      height: 28px;
      background: url('../assets/images/playbar.png') -80px -130px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -110px -130px no-repeat;
      }
    }
    // 图片开始
    .playerImg {
      position: relative;
      margin: 0 20px 0 30px;
      width: 34px;
      height: 35px;
      img {
        width: 34px;
        height: 35px;
      }
      .playerMask {
        position: absolute;
        left: 0;
        top: 0;
        width: 34px;
        height: 35px;
        background: url('../assets/images/playbar.png') left -80px no-repeat;
      }
    }
    // 播放详情区域
    .playerDetail {
      display: flex;
      flex-wrap: wrap;
      margin-right: 30px;
      width: 590px;
      height: 35px;
      // 歌曲信息
      .playerSong {
        display: flex;
        align-items: center;
        .playerSongSinger {
          margin: 0 10px;
          font-family: Arial, Helvetica, sans-serif;
          color: #797979;
        }
        .playerSongOrigin {
          height: 12px;
          width: 14px;
          background: url('../assets/images/playbar.png') -110px -104px
            no-repeat;
          &:hover {
            background: url('../assets/images/playbar.png') -130px -104px;
          }
        }
      }
      // 进度条
      .playerBarContainer {
        display: flex;
        align-items: center;
        width: 590px;
        .playerBar {
          position: relative;
          margin-right: 20px;
          width: 493px;
          height: 8px;
          background: url('../assets/images/statbar.png') left 0 no-repeat;
          .playerAlready {
            height: 100%;
            background: url('../assets/images/statbar.png') left -66px no-repeat;
          }
          .playerDot {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            height: 17px;
            width: 17px;
            background: url('../assets/images/iconall.png') -2px -252.5px
              no-repeat;
            border-radius: 50%;
            cursor: pointer;
            &:hover {
              background: url('../assets/images/iconall.png') -2px -282.5px
                no-repeat;
            }
          }
        }
        .playerTimeNow {
          color: #a1a1a1;
        }
        .playerTimeAll {
          font-family: Arial, Helvetica, sans-serif;
          color: #797979;
        }
      }
    }
    .playerLyrics {
      height: 15px;
      width: 15px;
      background: url('../assets/images/lyrics.jpg') -5px -5px no-repeat;
      &:hover {
        background: url('../assets/images/lyrics.jpg') -5px -30px no-repeat;
      }
    }
    .playerCollect {
      margin: 0 10px;
      height: 16px;
      width: 16px;
      background: url('../assets/images/playbar.png') -93px -167px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -93px -193px no-repeat;
      }
    }
    .playerShare {
      height: 15px;
      width: 15px;
      background: url('../assets/images/playbar.png') -119px -168px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -119px -194px no-repeat;
      }
    }
    .playerVertical {
      margin: 0 10px;
      width: 10px;
      height: 17px;
      // border: 1px solid red;
      background: url('../assets/images/playbar.png') -145px -252px no-repeat;
    }
    .playerVoice {
      width: 17px;
      height: 17px;
      background: url('../assets/images/playbar.png') -6px -251px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -35px -251px no-repeat;
      }
    }
    // 播放模式
    .playerCircleMode {
      margin: 0 10px;
      width: 17px;
      height: 17px;
    }
    .playerCirculate {
      background: url('../assets/images/playbar.png') -7px -347px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -37px -347px no-repeat;
      }
    }
    .playerRandom {
      background: url('../assets/images/playbar.png') -70px -252px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -97px -252px no-repeat;
      }
    }
    .playerSingle {
      background: url('../assets/images/playbar.png') -70px -347px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -97px -347px no-repeat;
      }
    }
    // 播放列表
    .playerTable {
      width: 55px;
      height: 20px;
      line-height: 20px;
      background: url('../assets/images/playbar.png') -46px -72px no-repeat;
      &:hover {
        background: url('../assets/images/playbar.png') -46px -102px no-repeat;
      }
      span {
        margin-left: 25px;
        font-family: Arial, Helvetica, sans-serif;
        color: #797979;
      }
    }
  }
}
</style>
